<template>
  <div class="faq-container">
    <el-card shadow="hover" class="faq-card">
      <template #header>
        <div class="card-header">
          <h1>常见问题解答 (FAQ)</h1>
          <div class="header-actions">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索问题"
              prefix-icon="Search"
              clearable
              class="search-input"
              @input="filterQuestions"
            />
          </div>
        </div>
      </template>
      
      <div class="faq-content">
        <el-row :gutter="20">
          <!-- 左侧分类 -->
          <el-col :span="6">
            <el-affix :offset="80">
              <div class="faq-categories">
                <el-menu
                  :default-active="activeCategory"
                  class="faq-category-menu"
                  @select="handleCategorySelect">
                  <el-menu-item index="all">
                    <el-icon><Collection /></el-icon>
                    <span>所有问题</span>
                    <el-tag size="small" type="info" class="question-count">{{ totalQuestions }}</el-tag>
                  </el-menu-item>
                  
                  <el-menu-item 
                    v-for="category in categories" 
                    :key="category.id" 
                    :index="category.id"
                  >
                    <el-icon><component :is="category.icon" /></el-icon>
                    <span>{{ category.name }}</span>
                    <el-tag size="small" type="info" class="question-count">{{ getQuestionCount(category.id) }}</el-tag>
                  </el-menu-item>
                </el-menu>
                
                <div class="contact-support">
                  <el-divider content-position="center">找不到答案？</el-divider>
                  <el-button type="primary" icon="Message" @click="showContactDialog">联系客服</el-button>
                </div>
              </div>
            </el-affix>
          </el-col>
          
          <!-- 右侧问题列表 -->
          <el-col :span="18">
            <div class="faq-questions">
              <div v-if="filteredQuestions.length" class="question-list">
                <el-collapse v-model="activeNames" accordion>
                  <el-collapse-item 
                    v-for="question in filteredQuestions" 
                    :key="question.id" 
                    :title="question.title" 
                    :name="question.id"
                  >
                    <template #title>
                      <div class="question-header">
                        <el-tag size="small" :type="getCategoryType(question.categoryId)">
                          {{ getCategoryName(question.categoryId) }}
                        </el-tag>
                        <span class="question-title">{{ question.title }}</span>
                      </div>
                    </template>
                    
                    <div class="question-content" v-html="question.content"></div>
                    
                    <div class="question-feedback">
                      <span class="feedback-text">此回答是否有帮助？</span>
                      <el-button 
                        size="small" 
                        :type="question.helpful === true ? 'success' : 'default'"
                        icon="ThumbUp"
                        @click="markHelpful(question.id, true)"
                      >
                        有帮助
                      </el-button>
                      <el-button 
                        size="small" 
                        :type="question.helpful === false ? 'danger' : 'default'"
                        icon="ThumbDown"
                        @click="markHelpful(question.id, false)"
                      >
                        没帮助
                      </el-button>
                    </div>
                    
                    <div class="question-meta">
                      <span class="question-date">更新于: {{ question.updateTime }}</span>
                      <span class="question-views">浏览: {{ question.views }}</span>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
              
              <el-empty v-else description="没有找到匹配的问题">
                <el-button type="primary" @click="showContactDialog">提交问题</el-button>
              </el-empty>
              
              <!-- 分页 -->
              <div class="pagination-container" v-if="showPagination">
                <el-pagination
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalFilteredQuestions"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    
    <!-- 联系客服对话框 -->
    <el-dialog
      title="联系客服"
      v-model="contactDialogVisible"
      width="500px"
      append-to-body
    >
      <el-form ref="contactFormRef" :model="contactForm" :rules="contactRules" label-width="80px">
        <el-form-item label="问题类型" prop="type">
          <el-select v-model="contactForm.type" placeholder="请选择问题类型">
            <el-option
              v-for="category in categories"
              :key="category.id"
              :label="category.name"
              :value="category.id"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="标题" prop="title">
          <el-input v-model="contactForm.title" placeholder="请输入问题标题" />
        </el-form-item>
        
        <el-form-item label="内容" prop="content">
          <el-input
            v-model="contactForm.content"
            type="textarea"
            :rows="5"
            placeholder="请详细描述您的问题"
          />
        </el-form-item>
        
        <el-form-item label="联系方式" prop="contact">
          <el-input v-model="contactForm.contact" placeholder="请留下您的联系方式（邮箱/电话）" />
        </el-form-item>
        
        <el-form-item label="附件">
          <el-upload
            action="#"
            :auto-upload="false"
            :limit="3"
            :file-list="contactForm.fileList"
            :on-change="handleFileChange"
          >
            <el-button type="primary">选择文件</el-button>
            <template #tip>
              <div class="el-upload__tip">
                可上传截图或相关文件，最大支持5MB，最多3个文件
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="contactDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitQuestion">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'FaqPage',
  data() {
    return {
      // 搜索关键词
      searchKeyword: '',
      
      // 当前选中的分类
      activeCategory: 'all',
      
      // 当前展开的问题
      activeNames: [],
      
      // 分类列表
      categories: [
        { id: 'account', name: '账号问题', icon: 'User' },
        { id: 'system', name: '系统使用', icon: 'Setting' },
        { id: 'permission', name: '权限问题', icon: 'Lock' },
        { id: 'data', name: '数据问题', icon: 'Document' },
        { id: 'technical', name: '技术支持', icon: 'Service' }
      ],
      
      // 问题列表
      questions: [
        {
          id: '1',
          categoryId: 'account',
          title: '如何重置密码？',
          content: `
            <p>如果您忘记了密码，可以通过以下方式重置：</p>
            <ol>
              <li>在登录页面点击"忘记密码"链接</li>
              <li>输入您的用户名或注册邮箱</li>
              <li>系统将向您的邮箱发送一封重置密码的邮件</li>
              <li>点击邮件中的链接，按照提示设置新密码</li>
            </ol>
            <p>如果您无法访问注册邮箱，请联系系统管理员手动重置密码。</p>
          `,
          updateTime: '2023-05-15',
          views: 1258,
          helpful: null
        },
        {
          id: '2',
          categoryId: 'account',
          title: '如何修改个人信息？',
          content: `
            <p>您可以按照以下步骤修改个人信息：</p>
            <ol>
              <li>登录系统后，点击右上角的用户头像</li>
              <li>在下拉菜单中选择"个人中心"</li>
              <li>在个人中心页面，点击"基本资料"标签</li>
              <li>修改您的个人信息</li>
              <li>点击"保存"按钮提交更改</li>
            </ol>
            <p>注意：用户名无法修改，如需更改请联系管理员。</p>
          `,
          updateTime: '2023-05-10',
          views: 876,
          helpful: null
        },
        {
          id: '3',
          categoryId: 'system',
          title: '系统支持哪些浏览器？',
          content: `
            <p>我们的系统支持以下现代浏览器的最新版本：</p>
            <ul>
              <li>Google Chrome（推荐）</li>
              <li>Mozilla Firefox</li>
              <li>Microsoft Edge</li>
              <li>Apple Safari</li>
            </ul>
            <p>为了获得最佳使用体验，我们强烈建议使用Google Chrome浏览器的最新版本。</p>
            <p>注意：系统不支持Internet Explorer，使用IE可能导致某些功能无法正常使用。</p>
          `,
          updateTime: '2023-04-28',
          views: 642,
          helpful: null
        },
        {
          id: '4',
          categoryId: 'permission',
          title: '为什么我无法访问某些功能模块？',
          content: `
            <p>系统采用基于角色的权限控制，您能看到和使用的功能取决于您的角色权限。如果您无法访问某些功能，可能是因为：</p>
            <ol>
              <li>您当前的角色没有相应的权限</li>
              <li>该功能模块处于维护状态</li>
              <li>系统配置问题导致权限错误</li>
            </ol>
            <p>解决方案：</p>
            <ul>
              <li>联系您的系统管理员，申请必要的权限</li>
              <li>检查系统公告，了解是否有功能维护的通知</li>
              <li>尝试退出并重新登录系统</li>
            </ul>
          `,
          updateTime: '2023-05-02',
          views: 523,
          helpful: null
        },
        {
          id: '5',
          categoryId: 'data',
          title: '如何导出数据报表？',
          content: `
            <p>您可以按照以下步骤导出数据报表：</p>
            <ol>
              <li>进入需要导出数据的功能页面</li>
              <li>使用筛选条件筛选需要的数据</li>
              <li>点击页面上的"导出"按钮</li>
              <li>在弹出的对话框中选择导出格式（Excel、CSV等）</li>
              <li>点击"确定"按钮开始导出</li>
            </ol>
            <p>注意事项：</p>
            <ul>
              <li>大量数据导出可能需要一些时间，请耐心等待</li>
              <li>导出功能受到权限控制，如果没有导出权限，请联系管理员</li>
              <li>单次最大导出记录数为10000条，如需导出更多数据，请分批次操作</li>
            </ul>
          `,
          updateTime: '2023-05-08',
          views: 789,
          helpful: null
        },
        {
          id: '6',
          categoryId: 'data',
          title: '如何导入数据？',
          content: `
            <p>您可以按照以下步骤导入数据：</p>
            <ol>
              <li>进入需要导入数据的功能页面</li>
              <li>点击"导入"按钮</li>
              <li>在弹出的对话框中下载导入模板</li>
              <li>按照模板格式填写数据</li>
              <li>点击"选择文件"上传填好的模板文件</li>
              <li>点击"开始导入"按钮</li>
            </ol>
            <p>注意事项：</p>
            <ul>
              <li>请严格按照模板格式填写数据，否则可能导致导入失败</li>
              <li>导入前建议备份系统数据</li>
              <li>单次最大导入记录数为1000条，如需导入更多数据，请分批次操作</li>
              <li>导入过程中请勿刷新页面或关闭浏览器</li>
            </ul>
          `,
          updateTime: '2023-04-25',
          views: 612,
          helpful: null
        },
        {
          id: '7',
          categoryId: 'technical',
          title: '系统响应速度慢怎么办？',
          content: `
            <p>如果您发现系统响应速度变慢，可以尝试以下解决方法：</p>
            <ol>
              <li>清除浏览器缓存和Cookie</li>
              <li>检查您的网络连接是否稳定</li>
              <li>关闭不必要的浏览器标签和应用程序，释放系统资源</li>
              <li>使用推荐的浏览器（Google Chrome最新版）</li>
              <li>检查您的设备是否满足系统运行的最低配置要求</li>
            </ol>
            <p>如果以上方法无法解决问题，可能是系统负载较高或正在进行维护。请稍后再试，或联系技术支持获取帮助。</p>
          `,
          updateTime: '2023-05-12',
          views: 435,
          helpful: null
        },
        {
          id: '8',
          categoryId: 'technical',
          title: '如何报告系统错误？',
          content: `
            <p>当您遇到系统错误时，请按照以下步骤报告：</p>
            <ol>
              <li>记录错误发生时的操作步骤</li>
              <li>截取错误页面或错误信息</li>
              <li>点击系统右下角的"反馈"按钮</li>
              <li>填写错误报告表单，附上截图和操作步骤</li>
              <li>提交报告</li>
            </ol>
            <p>为了帮助我们更快地解决问题，请提供尽可能详细的信息，包括：</p>
            <ul>
              <li>浏览器类型和版本</li>
              <li>操作系统</li>
              <li>错误发生的具体时间</li>
              <li>是否能够稳定复现该错误</li>
            </ul>
            <p>技术支持团队会在收到报告后尽快处理并回复。</p>
          `,
          updateTime: '2023-05-05',
          views: 367,
          helpful: null
        },
        {
          id: '9',
          categoryId: 'system',
          title: '如何设置系统通知提醒？',
          content: `
            <p>您可以按照以下步骤设置系统通知提醒：</p>
            <ol>
              <li>点击右上角用户头像，选择"个人中心"</li>
              <li>切换到"消息通知"标签</li>
              <li>在通知设置中，您可以：
                <ul>
                  <li>选择通知方式（系统消息、邮件、短信）</li>
                  <li>设置不同类型通知的开关（安全提醒、活动通知、系统公告、任务通知）</li>
                </ul>
              </li>
              <li>完成设置后点击"保存设置"按钮</li>
            </ol>
            <p>注意：短信通知需要您绑定手机号，邮件通知需要您绑定邮箱。</p>
          `,
          updateTime: '2023-04-20',
          views: 289,
          helpful: null
        },
        {
          id: '10',
          categoryId: 'account',
          title: '如何绑定或更换手机号？',
          content: `
            <p>您可以按照以下步骤绑定或更换手机号：</p>
            <ol>
              <li>点击右上角用户头像，选择"个人中心"</li>
              <li>切换到"安全设置"标签</li>
              <li>找到"手机绑定"选项，点击"绑定"或"修改"按钮</li>
              <li>在弹出的对话框中输入新手机号</li>
              <li>点击"获取验证码"按钮</li>
              <li>输入收到的验证码</li>
              <li>点击"确定"完成绑定</li>
            </ol>
            <p>注意：</p>
            <ul>
              <li>手机号是重要的安全信息，用于接收安全验证码和重要通知</li>
              <li>更换手机号后，系统可能要求您重新登录</li>
              <li>如果无法收到验证码，请检查手机号是否正确或联系客服</li>
            </ul>
          `,
          updateTime: '2023-05-03',
          views: 421,
          helpful: null
        }
      ],
      
      // 分页相关
      currentPage: 1,
      pageSize: 10,
      
      // 筛选后的问题
      filteredQuestions: [],
      
      // 联系客服对话框
      contactDialogVisible: false,
      contactForm: {
        type: '',
        title: '',
        content: '',
        contact: '',
        fileList: []
      },
      contactRules: {
        type: [{ required: true, message: '请选择问题类型', trigger: 'change' }],
        title: [
          { required: true, message: '请输入问题标题', trigger: 'blur' },
          { min: 5, max: 100, message: '标题长度在5到100个字符之间', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入问题内容', trigger: 'blur' },
          { min: 10, max: 2000, message: '内容长度在10到2000个字符之间', trigger: 'blur' }
        ],
        contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
      }
    }
  },
  computed: {
    // 问题总数
    totalQuestions() {
      return this.questions.length
    },
    
    // 筛选后的问题总数
    totalFilteredQuestions() {
      return this.getFilteredQuestions().length
    },
    
    // 是否显示分页
    showPagination() {
      return this.totalFilteredQuestions > this.pageSize
    },
    
    // 当前页的问题
    paginatedQuestions() {
      const filteredQuestions = this.getFilteredQuestions()
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return filteredQuestions.slice(start, end)
    }
  },
  mounted() {
    this.filterQuestions()
  },
  methods: {
    // 筛选问题
    filterQuestions() {
      this.filteredQuestions = this.paginatedQuestions
    },
    
    // 获取筛选后的所有问题（未分页）
    getFilteredQuestions() {
      let result = [...this.questions]
      
      // 根据分类筛选
      if (this.activeCategory !== 'all') {
        result = result.filter(q => q.categoryId === this.activeCategory)
      }
      
      // 根据关键词搜索
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase()
        result = result.filter(q => 
          q.title.toLowerCase().includes(keyword) || 
          q.content.toLowerCase().includes(keyword)
        )
      }
      
      return result
    },
    
    // 处理分类选择
    handleCategorySelect(index) {
      this.activeCategory = index
      this.currentPage = 1
      this.filterQuestions()
    },
    
    // 获取分类下的问题数量
    getQuestionCount(categoryId) {
      return this.questions.filter(q => q.categoryId === categoryId).length
    },
    
    // 获取分类名称
    getCategoryName(categoryId) {
      const category = this.categories.find(c => c.id === categoryId)
      return category ? category.name : '未分类'
    },
    
    // 获取分类标签类型
    getCategoryType(categoryId) {
      const typeMap = {
        'account': 'primary',
        'system': 'success',
        'permission': 'warning',
        'data': 'info',
        'technical': 'danger'
      }
      return typeMap[categoryId] || ''
    },
    
    // 处理分页大小变化
    handleSizeChange(val) {
      this.pageSize = val
      this.filterQuestions()
    },
    
    // 处理页码变化
    handleCurrentChange(val) {
      this.currentPage = val
      this.filterQuestions()
    },
    
    // 标记问题是否有帮助
    markHelpful(questionId, isHelpful) {
      const question = this.questions.find(q => q.id === questionId)
      if (question) {
        // 如果已经选择了相同的选项，则取消选择
        if (question.helpful === isHelpful) {
          question.helpful = null
        } else {
          question.helpful = isHelpful
        }
        this.$message({
          type: 'success',
          message: '感谢您的反馈！'
        })
      }
    },
    
    // 显示联系客服对话框
    showContactDialog() {
      this.contactDialogVisible = true
      this.contactForm = {
        type: '',
        title: '',
        content: '',
        contact: '',
        fileList: []
      }
    },
    
    // 处理文件上传
    handleFileChange(file, fileList) {
      // 验证文件大小
      if (file.size / 1024 / 1024 > 5) {
        this.$message.error('文件大小不能超过5MB')
        const index = fileList.indexOf(file)
        if (index !== -1) {
          fileList.splice(index, 1)
        }
      } else {
        this.contactForm.fileList = fileList
      }
    },
    
    // 提交问题
    submitQuestion() {
      this.$refs.contactFormRef.validate(valid => {
        if (valid) {
          // 在实际项目中，这里应该调用API提交问题
          this.$message.success('问题提交成功，我们将尽快回复您！')
          this.contactDialogVisible = false
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.faq-container {
  padding: 20px;
}

.faq-card {
  min-height: calc(100vh - 200px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 250px;
}

.faq-content {
  margin-top: 20px;
}

.faq-categories {
  border-right: 1px solid #f0f0f0;
  height: calc(100vh - 300px);
  display: flex;
  flex-direction: column;
}

.faq-category-menu {
  flex: 1;
  border-right: none;
}

.question-count {
  float: right;
  margin-top: 14px;
}

.contact-support {
  padding: 20px 0;
  text-align: center;
}

.faq-questions {
  padding: 0 20px;
}

.question-header {
  display: flex;
  align-items: center;
}

.question-title {
  margin-left: 10px;
}

.question-content {
  padding: 10px 0;
  line-height: 1.6;
}

.question-feedback {
  margin: 20px 0;
  display: flex;
  align-items: center;
}

.feedback-text {
  margin-right: 15px;
  color: #606266;
}

.question-meta {
  margin-top: 10px;
  color: #909399;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 覆盖Element UI的一些样式 */
:deep(.el-collapse-item__header) {
  font-size: 16px;
}

:deep(.el-collapse-item__content) {
  padding: 0 20px 20px;
}

:deep(.el-collapse-item__wrap) {
  background-color: #f9f9f9;
}
</style> 